<template>
  <!-- 加个显示条件:new里面有数据的时候才显示页面 -->
  <div class="page-active" v-if="news">
    <div class="d-flex ai-center p-y-2 m-b-2 bor">
      <!-- 点击返回上一级 -->
      <i
        class="iconfont icon-back text-blue-1 p-b-0-1 fsw-700"
        @click="$router.go(-1)"
      ></i>
      <div class="flex-1 fs-lg fsw-700 text-blue-1 text-ellipsis">
        {{ news.name }}
      </div>
      <!-- 这个 news.createdAt | date 可以看作是一个管道处理,把news.createdAt的结果当作val给date进行处理-->
      <div class="text-grey-1 fs-xs">{{ news.createdAt | date }}</div>
    </div>

    <!-- 主体html部分:要现实的的是html内容而不是文字 -->
    <div v-html="news.body" class="fs-lg body"></div>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },

  props: {
    id: { required: true },
  },
  data() {
    return {
      news: null,
    };
  },
  methods: {
    async fetchnews() {
      const res = await this.$http2.get(`news/list/${this.id}`);
      this.news = res.data;
    },
  },
  created() {
    this.fetchnews();
  },
};
</script>

<style lang="scss">
@import "../assets/scss/_variables";

.bor {
  border: 0.0769rem /* 1px -> .0769rem */ solid $border-color;
}
.body {
  img {
    width: 100%;
    height: auto;
  }
}
</style>